<template>
  <div class="app-container">
    <avue-crud
      :option="option"
      :data="data"
      :table-loading="loading"
      :page.sync="page"
      @on-load="onLoad"
      @current-change="currentChange"
      @search-change="searchChange"
      @search-reset="resetChange"
    >
    </avue-crud>
  </div>
</template>

<script>
import { getJsBankData } from "@/api/manager.js";
export default {
  data() {
    return {
      loading: false,
      searchList: {},
      /* 分页 */
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        background: false,
      },
      data: [],
      dicData: [],
      option: {
        headerAlign: "center",
        align: "center",
        border: true,
        card: true,
        defaultExpandAll: true,
        dialogDrag: false,
        labelWidth: 135,
        viewBtn: false,
        delBtn: false,
        excelBtn: false,
        editBtn: false,
        addBtn: false,
        selection: false,
        searchLabelWidth: '25%',
        searchSpan: 6,
        searchMenuSpan: 4,
        index: true,
        indexLabel: "序号",
        indexWidth: 100,
        columnBtn: false,
        refreshBtn: false,
        selectClearBtn: false,
        searchShowBtn: false,
        menu: false,
        column: [
          {
            label: "企业名称",
            prop: "qymc",
            display: false,
            search: true,
            width:240
          },
          {
            label: "社会统一信用代码",
            prop: "shtyxydm",
            display: false,
            width:190
          },
          {
            label: "申请人姓名",
            prop: "sqrxm",
            display: false,
            search: true,
          },
          {
            label: "申请人身份证号",
            prop: "sqrsfzh",
            display: false,
            width:190
          },
          {
            label: "申请人手机号",
            prop: "sqrsjh",
            display: false,
            width:130
          },
          {
            label: "是否法人",
            prop: "sffr",
            display: false,
            dicData: [
              {
                label: "是",
                value: 1,
              },
              {
                label: "否",
                value: 0,
              },
            ],
          },
          {
            label: "渠道",
            prop: "qdcode",
            display: false,
            dicData: [],
            width:130
          },
          {
            label: "申请状态",
            prop: "sqzt",
            display: false,
            dicData: [],
          },
          {
            label: "申请时间",
            prop: "createTime",
            display: false,
            search: true,
            searchRange: true,
            type: "datetime",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            width:180
          },
        ],
      },
    };
  },
  created() {
    this.$store
      .dispatch("asyncApi/getDict", {
        code: "JSYHQDCODE",
      })
      .then((res) => {
        this.option.column[6].dicData = res;
      });
  },
  computed: {},
  methods: {
    onLoad(page, params = {}) {
      let searchList = this.searchList;
      Object.assign(params, {
        ...searchList,
        pageNum: this.page.currentPage,
        pageSize: this.page.pageSize,
      });
      this.loading = true;
      getJsBankData(params).then((data) => {
        if (data.status) {
          this.loading = false;
          this.data = data.data.records;
          this.page.total = data.data.total;
        }
      });
    },
    /* 清空 */
    resetChange() {
      this.page.currentPage = 1;
      this.page.pageSize = 10;
      this.searchList = {};
      this.onLoad();
    },
    /* 搜索筛选 */
    searchChange(params, done) {
      console.log(params);
      done();
      this.page.currentPage = 1;
      this.page.pageSize = 10;
      if (params.createTime) {
        params.startTime = params.createTime[0];
        params.endTime = params.createTime[1];
      }
      if (params.sqrxm) {
        params.name = params.sqrxm;
      }
      params.createTime = [];
      this.searchList = {
        ...params,
      };
      this.onLoad();
    },
    /* 改变页码 */
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
  },
};
</script>

<style scoped="scoped" lang="scss">
/deep/ .avue-crud__pagination {
  text-align: center;
}
.dialog-footer {
  text-align: center;
  margin: 20px auto;
}
.tips {
  color: #4a8bf6;
  font-size: 14px;
}
.detailtable {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: #e5e5e5 solid 1px;
}
.detailtable tr {
  width: 100%;
}
.detailtable td {
  padding: 8px 10px;
  text-align: left;
  line-height: 24px;
  font-size: 14px;
  color: #434343;
  border: #e5e5e5 solid 1px;
}
.detailtable td {
  font-weight: normal;
  background-color: #fff;
}
.detailtable td {
  word-break: break-all;
}
</style>
